
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    <title></title>
    <link href="js/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <link href="css/table.css" rel="stylesheet" type="text/css">
    <style>
        tbody{height: 300px !important;;overflow: auto !important;}
    </style>

</head>
<body style="background-color: #ecf0f5;font-family: 微软雅黑;color: #475059;min-width: 1150px;overflow: auto">
<div class="notice_main">
    <h6>布控报警记录</h6>
    <div style="border-bottom: 1px #ccc solid;padding-bottom: 8px">
        <p style="line-height: 24px;font-size: 14px;padding: 4px 0 0 36px ;color:#bb8940;background-image: url(img/ts_03.png);background-repeat: no-repeat;background-position: 10px 8px;font-weight: bold">温馨提示</p>
        <ul class="ts">
            <li><span>*</span>该页面主要显示的是布控报警记录表格的类容。</li>
        </ul>
    </div>
    <div class="notice_check">
        <div class="notice_check" style="padding: 16px 15px 8px 15px">
            <p>
                <label class="">报警姓名：</label>
                <input type="text" class="find_input">
                <label class="">手机号码：</label>
                <input type="text" class="find_input">
                <label class="">报警时间：</label>
                <input type="text" class="find_input">
            </p>
        </div>
        <div class="notice_check  notice_check_last">
            <p class="">
                <label class="">案件类型：</label>
                <select class="find_input"><option>全部</option><option>1</option></select>
                <label class="">案发地点：</label>
                <input type="text" class="find_input">
                <label class="">关联卡口：</label>
                <input type="text" class="find_input">
                <button class="check_btn">查询</button>
            </p>
            <!--<div class="notice_nav r_right">-->
            <!--<a class="btn btn-default" onclick="addRole()"><span class="glyphicon glyphicon-plus"></span>申请</a>-->
            <!--<a class="btn btn-default"><span class="glyphicon glyphicon-remove"></span>删除</a>-->
            <!--<a class="btn btn-default" onclick="addRole()"><span class="glyphicon glyphicon-pencil"></span>编辑</a>-->
            <!--</div>-->
            <div class="clear"></div>
        </div>
    </div>

    <table id="table" class="table_style" style="margin: 0 auto" > </table>
</div>
<script src="js/jquery/jQuery-2.2.0.min.js"></script>
<script src="js/bstable/js/bootstrap.min.js"></script>
<script src="js/bstable/js/bootstrap-table.js"></script>
<script src="js/bstable/js/bootstrap-table-zh-CN.min.js"></script>
<script src="js/layer_v2.1/layer/layer.js"></script>

<script type="text/javascript">
    $(function () {
        $('#table').bootstrapTable({
            method: "get",
            striped: true,
            singleSelect: false,
            url: "json/110List.json",
            dataType: "json",
            pagination: true, //分页
            pageSize: 10,
            pageNumber: 1,
            search: false, //显示搜索框
            contentType: "application/x-www-form-urlencoded",
            queryParams: null,
            columns: [
                {
                    checkbox: "true",
                    field: 'check',
                    align: 'center',
                    valign: 'middle'
                }
                ,
                {
                    title: "呼入电话",
                    field: 'InPhone',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '呼入时间',
                    field: 'InTime',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '案件类型',
                    field: 'CaseType',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '案发地点',
                    field: 'CaseAddr',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '关联卡口',
                    field: 'GLKK',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '案件简介',
                    field: 'CaseContent',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '操作',
                    field: 'Id',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row) {
                        var d = '<a href="javascript:void(0)"  onclick="addRole(\'' + row.Id + '\')">查看详情</a> ';
                        return d;
                    }
                }

            ]
        });
    });
    function addRole(){
        layer.open({
            type: 2,
            title: '报警信息详情',
            shadeClose: true,
            shade: 0.5,
            skin: 'layui-layer-rim',
            closeBtn:1,
            area: ['700px', '300px'],
            content: 'alarmRecord_tail.html'
        });
    }
</script>
</body>
</html>
